<template>
    <a-breadcrumb class="container-breadcrumb select-none">
        <a-breadcrumb-item>
            <icon-apps />
        </a-breadcrumb-item>
        <a-breadcrumb-item v-for="item in items" :key="item">
            {{ item }}
        </a-breadcrumb-item>
    </a-breadcrumb>
</template>

<script setup>

defineProps({
    items: {
        type: Array,
        default() {
            return [];
        },
    },
});
</script>

<style lang="scss" scoped>
.container-breadcrumb {
    margin: 16px 0;
    :deep(.arco-breadcrumb-item) {
        color: rgb(var(--gray-6));
        &:last-child {
            color: rgb(var(--gray-8));
        }
    }
}
</style>
